/* eslint-disable eqeqeq */
<template>
  <d2-container>
    <div>
      <!-- 表单查询 -->
      <div>
        <el-form
          ref="queryParams"
          :model="queryParams"
          inline="ture"
          label-width="80px"
          class="loginForm"
        >
          <el-form-item label="订单编号">
            <el-input
              v-model="queryParams.id"
              placeholder="订单编号" clearable
            ></el-input>
          </el-form-item>
          <!-- 套餐选择 -->
          <el-form-item label="用户账号">
            <el-input
              v-model="queryParams.uid"
              placeholder="用户账号" clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="申请人" >
            <el-input v-model="queryParams.applicant" placeholder="姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select
              v-model="queryParams.orderState"
              placeholder="请选择"
              clearable
            >
              <el-option label="待审核" value="待审核"></el-option>
              <el-option label="拒放款" value="拒放款"></el-option>
              <el-option label="待放款" value="待放款"></el-option>
              <el-option label="已放款" value="已放款"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间">
            <div class="block">
              <el-date-picker
                v-model="queryParams.subTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="订单时间"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrders">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 学员列表 -->
      <div>
        <el-table
          :data="pageBean.beanList"
          style="width: 100%"
          border
          align=""
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            align="center"
            prop="id"
            label="订单编号"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="subTime"
            label="提交时间"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="uid"
            label="用户账号"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="applicant"
            label="申请人"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="product"
            label="申请产品"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="money"
            label="申请金额（元）"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="loanDate"
            label="贷款期限（月）"
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="orderState"
            label="订单状态"
            width="150"
          ></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <!-- 领取 -->
              <el-button
                type="success"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                >订单审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageBean.pageIndex"
          :page-sizes="[5, 10]"
          :page-size="pageBean.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageBean.totalRecord"
        ></el-pagination>
      </div>
      <!-- 编辑对话框-->
      <div>
        <el-dialog
          title="订单审核"
          :visible.sync="dialogFormVisible"
          @close="closeDialog"
          :before-close="handleClose"
          width="650px"
        >
          <el-form
            ref="ordersForm"
            :model="ordersForm"
            :rules="rules"
            :inline="true"
            class="modifyForm"
          >
            <el-form-item label="用户账号：" prop="id" label-width="120px">
              <!-- <el-input type="text" v-model="ordersForm.id"></el-input> -->
              {{ordersForm.id}}
            </el-form-item>
            <el-form-item label="申请产品：" prop="product" label-width="120px">
               {{ordersForm.product}}
              <!-- <el-input v-model="ordersForm.product"></el-input> -->
            </el-form-item>
             <el-form-item label="申请人：" prop="applicant" label-width="120px">
              {{ordersForm.applicant}}
              <!-- <el-input type="applicant" v-model="ordersForm.applicant"></el-input> -->
            </el-form-item>
             <el-form-item label="申请金额：" prop="money" label-width="120px">
                {{ordersForm.money}}（元）
              <!-- <el-input v-model="ordersForm.money"></el-input> -->
            </el-form-item>
            <el-form-item label="信用分：" prop="creditScore" label-width="120px">
                {{ordersForm.creditScore}}（分）
              <!-- <el-input type="applicant" v-model="ordersForm.creditScore"></el-input> -->
            </el-form-item>
            <el-form-item label="贷款期限：" prop="loanDate" label-width="120px">
                {{ordersForm.loanDate}}（月）
              <!-- <el-input type="applicant" v-model="ordersForm.creditScore"></el-input> -->
            </el-form-item>
            <el-form-item label="订单状态："  prop="orderState" label-width="100px">
              <el-select v-model="ordersForm.orderState" placeholder="请选择" clearable>
              <el-option label="待审核" value="待审核"></el-option>
              <el-option label="拒放款" value="拒放款"></el-option>
              <el-option label="待放款" value="待放款"></el-option>
              <el-option label="已放款" value="已放款"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
          <!-- 插槽 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyOrders('ordersForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </d2-container>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      pageBean: {
        beanList: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalPage: 0,
      },
      multipleSelection: [],
      // 表单参数
      queryParams: {
        id: "",
        uid: "",
        applicant: "",
        subTime: "",
        orderState: "",
      },
      // 编辑弹框表单数据
      ordersForm: {
        orderState: "",
      },
      dialogFormVisible: false,
      // formLabelWidth: "120px",
      rules: {
        // getMan: [
        //   { required: true, message: "请输入姓名", trigger: "blur" },
        //   { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        // ],
        // note: [{ max: 50, message: "长度在50个文字内", trigger: "blur" }],
      },
    };
  },
  // 初始化调用分页查询
  created() {
    console.log("aaa");
    this.getOrders();
  },
  // 表单查询提交
  methods: {
      // 确认编辑数据
      handleEdit(index, row) {
        console.log(index, row);
        this.dialogFormVisible = true;
        // 回显表单数据到对话框
        this.ordersForm = { ...row };
      },
      // 修改表单提交验证
      modifyOrders(formName) {
        this.$refs[formName].validate((valid) => {
          // 编辑信息请求
          // eslint-disable-next-line eqeqeq
          if (valid) {
            console.log("修改订单");
            this.$axios
              .put("http://localhost:8601/myorders/orderState", this.ordersForm)
              .then((resp) => {
                this.getOrders();
                this.$message("编辑成功");
                this.dialogFormVisible = false;
                this.orderState();
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 清空模态框数据
      closeDialog() {
        this.ordersForm = {};
        this.$refs.ordersForm.clearValidate();
      },
      // 初始化分页查询
      getOrders() {
        console.log("aaa2");
        console.log(this.queryParams);
        this.$axios
          .get("http://localhost:8601/myorders/selectPage", {
            params: {
              id: this.queryParams.id,  
              uid: this.queryParams.uid,
              applicant: this.queryParams.applicant,
              subTime: this.queryParams.subTime,
              orderState: this.queryParams.orderState,
              pageIndex: this.pageIndex,
              pageSize: this.pageSize,
            },
          })
          .then((resp) => {
            // this.tableData = resp.data.data.beanList;
            this.pageBean = resp.data.data;
          });
      },
      // 条件模糊查询
      searchOrders() {
        console.log("aaa11");
        this.getOrders();
      },
      // 查询分页条件
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getOrders();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.getOrders();
      },
    },
};
</script>
<style scoped>
.modifyForm {
  width: 100;
  /* height: 200px; */
  /* margin: 0px auto; */
  /* padding: 100px; */
}
</style>